@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.content {
  min-height: calc(100% - rem(92));
  background-color: #fff;
  position: relative;
  z-index: 999;
  overflow: hidden;
}

.questionContent {
  height: calc(100vh - rem(92) - rem(185))
}

.question_content {
  padding: rem(50) 0 rem(50) rem(40);
  height: 100%;
  overflow-y: auto;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.questionType,
.rules {
  height: rem(50);
  line-height: rem(50);
  font-size: rem(25);
  font-weight: 500;
  text-align: center;
  border-radius: rem(14) rem(50) rem(50) rem(14);
}

.questionType {
  width: rem(90);
  background-color: #d6f3df;
  color: #32c45d;
}

.rules {
  width: rem(120);
  background-color: #ffe3ce;
  color: #ff7209;
}

.title,
.f28 {
  font-weight: 400;
  color: #4a4a4a;
  line-height: rem(50);
  width: calc(100% - rem(90));
}

.title {
  font-size: rem(30);
}

.f28 {
  font-size: rem(28);
}

.w90 {
  width: rem(90);
  height: rem(50);
  line-height: rem(50);
  text-align: center;
}

.option-num,
.option-true,
.option-false {
  width: rem(50);
  height: rem(50);
  border-radius: 50%;
  box-shadow: rem(2) rem(2) rem(10) 0 rgba(0, 0, 0, 0.1);
  font-size: rem(22);
  font-weight: bold;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-true {
  color: #fff;
  background-color: #32c45d;
}

.option-false {
  color: #fff;
  background-color: #ff595b;
}

.w60 {
  width: 60%;
}

.successFont {
  color: #39c662;
}

.errorFont {
  color: #ff595b;
}

.question_bank {
  border-top: rem(6) solid #f4f4f4;
  width: 100%;
  // position: absolute;
  // left: 0;
  // bottom: 92px;
  // height: 185px;
  background-color: #fff;
}

.boundary_button,
.default_button {
  width: rem(165);
  font-size: rem(25);
  height: rem(55);
  border-radius: rem(50);
  text-align: center;
  line-height: rem(55);
  color: #4a4a4a;
  cursor: pointer;
}

.default_button {
  border: rem(2) solid #4a4a4a;

  &:hover {
    color: #39c662;
    border: rem(2) solid #39c662;
  }
}

.boundary_button {
  color: #a4a4a4;
  border: rem(2) solid #a4a4a4;
}

.true_icon,
.false_icon {
  width: rem(35);
  height: rem(35);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: rem(20);
}

.false_icon {
  background-color: #ff595b;
}

.true_icon {
  background-color: #32c45d;
}

.f30 {
  font-size: rem(26);
  color: #4a4a4a;
}

.marL80 {
  margin-left: rem(80);
}

.pic35 {
  width: rem(35);
  height: rem(35);
}

.use {
  padding: rem(45) rem(20) 0 rem(65);
}

.tips {
  margin-top: rem(18);
  padding: 0 rem(40);
}

.font40 {
  font-size: rem(30);
}

.clearRecord {
  width: rem(130);
  font-size: rem(22);
  height: rem(50);
  text-align: center;
  border-radius: rem(70);
  line-height: rem(50);
  font-weight: 400;
  color: #4a4a4a;
  border: rem(2) solid #4a4a4a;
}

.list {
  width: 100%;
  // height: rem(620);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  row-gap: rem(20);
  padding-bottom: rem(40);
}

.list_item,
.active,
.success,
.wrong_bg {
  height: rem(80);
  border-radius: rem(8);
  width: rem(80);
  text-align: center;
  line-height: rem(80);
  font-size: rem(28);
  min-width: rem(80);
  min-height: rem(80);
}

.list_item {
  border: rem(2) solid #d9d9d9;
  position: relative;

  .label {
    position: absolute;
    bottom: rem(-10);
    left: rem(-8);
    width: rem(100);
    height: rem(30);
    color: #fff;
    background-color: #ff7209;
    text-align: center;
    line-height: rem(30);
    font-size: rem(20);
    border-radius: rem(50);
  }
}

.active {
  border: rem(2) solid #333;
}

.success {
  border: rem(2) solid #32c45d;
  color: #32c45d;
  background-color: #f7fdf8;
}

.wrong_bg {
  border: rem(2) solid #ff595b;
  color: #ff595b;
  background-color: #fff8f8;
}

.cancel,
.sure {
  width: rem(150);
  height: rem(50);
  border-radius: rem(50);
  text-align: center;
  line-height: rem(50);
  font-size: rem(30);
}

.cancel {
  background-color: #fff;
  color: #32c45d;
  border: rem(2) solid #32c45d;
}

.sure {
  background-color: #32c45d;
  color: #fff;
}

.prompt {
  font-size: rem(32);
  color: #333;
  font-weight: bold;
  margin-left: rem(20);
  margin-top: rem(10);
}

.f35 {
  font-size: rem(28);
  color: #333;
  margin: rem(100) 0 rem(100) rem(60);
}

.expand {
  width: rem(110);
  height: rem(50);
  font-size: rem(25);
  color: #4b4b4b;
  position: absolute;
  right: 0;
  bottom: rem(350);
  border-radius: rem(50) 0 0 rem(50);
  box-shadow:
    0 rem(16) rem(48) rem(16) rgba(0, 0, 0, 0.08),
    0 rem(12) rem(32) rgba(0, 0, 0, 0.12),
    0 rem(8) rem(16) rem(-8) rgba(0, 0, 0, 0.16);
  z-index: 1000;
  transition: right 0.3s ease;

  &.expanded {
    right: calc(30% - rem(20));
  }
}

.analysis {
  width: 30%;
  box-shadow: rem(-5) 0 rem(10) rgba(0, 0, 0, 0.08);
  height: 100%;
  overflow: hidden;
  margin-right: rem(-20);
  display: flex;
  flex-direction: column;
}

.analysis_content {
  flex: 1;
  overflow-y: auto;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.analysis_header {
  background-color: #fff;
  padding: rem(15);

  .correct_answer {
    background-color: #f9fafb;
    border-radius: rem(8);
    padding: rem(20);
  }
}

.correction {
  color: #9e9e9e;
  font-size: rem(30);
}

.answer_option {
  font-size: rem(30);
  color: #32c45d;
}

.answer_title {
  font-size: rem(30);
  color: #5b5b5b;
}

.suji {
  background-color: #fff;
  padding: rem(15) rem(30) rem(20);
}

.line {
  width: rem(6);
  background-color: #32c45d;
  height: rem(30);
  border-radius: rem(50);
}

.analysis_title {
  font-size: rem(30);
  color: #333;
  font-weight: bold;
}

.cont {
  position: relative;
  // width: rem(450);
  margin: rem(15) 0 0 0;
  margin-top: rem(20);

  p {
    font-size: rem(28);
    font-weight: 400;
    line-height: rem(32);
    color: #999;
  }
}

.bg {
  position: absolute;
  left: rem(89);
  top: 0px;
  width: rem(202);
  height: rem(34);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.check {
  position: absolute;
  right: rem(-30);
  top: rem(-15);
  width: rem(240);
  height: rem(50);
  background: linear-gradient(330deg, #eba867 0%, #f0d9ab 56%, #eba867 100%);
  box-shadow:
    0 rem(4) rem(12) rgba(255, 140, 66, 0.3),
    inset 0 rem(1) rem(3) rgba(255, 255, 255, 0.4);
  border-radius: rem(25);
  border: none;
  font-size: rem(24);
  font-weight: 600;
  line-height: rem(50);
  color: #875600;
  cursor: pointer;
  text-align: center;
  z-index: 10;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(rem(-2));
    box-shadow:
      0 rem(6) rem(16) rgba(255, 140, 66, 0.4),
      inset 0 rem(1) rem(3) rgba(255, 255, 255, 0.4);
  }

  &:active {
    transform: translateY(0);
    box-shadow:
      0 rem(2) rem(8) rgba(255, 140, 66, 0.3),
      inset 0 rem(1) rem(3) rgba(255, 255, 255, 0.4);
  }
}

.gap {
  height: rem(10);
  background-color: #f9fafb;
}

.analysis_item {
  font-size: rem(28);
  color: #999;
  // line-height: rem(55);
  margin-top: rem(20);
}

.back-to-top {
  background-color: #fff;
  width: rem(60);
  height: rem(60);
  border-radius: 50%;
  position: absolute;
  bottom: rem(320);
  right: rem(50);
  box-shadow:
    0px rem(16) rem(48) rem(16) rgba(0, 0, 0, 0.08),
    0px rem(12) rem(32) rgba(0, 0, 0, 0.12),
    0px rem(8) rem(16) rem(-8) rgba(0, 0, 0, 0.16);
}

.tipsImg,
.tipsImgs {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: rem(20);
  cursor: pointer;

  p {
    color: #9d9d9d;
    font-size: rem(20);
    margin-top: rem(20);
  }
}

.tipsImgs {
  height: 25vh;
}

.tipsImg {
  height: 70vh;
}

.analysisIcon {
  width: rem(30);
  height: rem(30);
  margin-right: rem(10);
}

.download {
  writing-mode: vertical-rl;
  text-align: center;
  color: #2cbb54;
  font-weight: bold;
  font-size: rem(15);
}

.downloadInfo {
  width: rem(130);
  height: rem(120);
  background-color: #eefff6;
}

.downloadImg {
  width: rem(100);
  height: rem(100);
}

.iconImg {
  width: rem(25);
  height: rem(25);
}

.marR20 {
  margin-right: rem(30);
}

.button {
  width: rem(150);
  height: rem(50);
  line-height: rem(50);
  background-color: #ff595b;
  color: #fff;
  border-radius: rem(4);
  text-align: center;
  font-size: rem(20);
  font-weight: bold;
  border-radius: rem(50);
}

.font20 {
  font-size: rem(20);
  // font-weight: bold;
  margin-top: rem(30);
  margin-left: rem(20);
}

.dialog-footer {
  margin-top: rem(50);
}

.marB40 {
  margin-bottom: rem(40);
}

.sureTips {
  font-size: rem(20);
  margin-top: rem(50);
  margin-left: rem(20);
}

.exam-result-container {
  display: flex;
  flex-direction: column;
  gap: rem(20);
  padding: rem(10);
  margin-top: rem(30);
}

.score,
.fraction {
  text-align: center;
  color: #fe574a;
}

.score {
  font-size: rem(35);
  font-weight: bold;
}

.fraction {
  font-size: rem(18);
}

.comment {
  font-size: rem(25);
  color: #333;
  font-weight: 500;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: rem(15);
  margin: rem(10) 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value {
  font-size: rem(20);
}

.correct {
  color: var(--el-color-success);
}

.wrong {
  color: var(--el-color-danger);
}

.unanswered {
  color: var(--el-color-warning);
}


.actions {
  display: flex;
  justify-content: center;
  gap: rem(20);
  margin-top: rem(20);
}

.wrongCheck,
.backList {
  width: rem(170);
  height: rem(35);
  line-height: rem(35);
  text-align: center;
  border: rem(1) solid #ccc;
  border-radius: rem(50);
  font-size: rem(16);
  cursor: pointer;
  color: #333;
}

.unmultiple,
.multipled {
  width: rem(400);
  height: rem(60);
  border-radius: rem(50);
  text-align: center;
  font-size: rem(28);
  line-height: rem(60);
  margin-top: rem(25);
  cursor: pointer;
}

.unmultiple {
  background-color: #eeeeee;
  color: #9d9d9d;
}

.multipled {
  background-color: #2bc517;
  color: #fff;
}

.reading {
  color: #409eff;
}
